<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>失物招领平台 - 个人中心</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409EFF',
                        secondary: '#67C23A'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .avatar {
            width: 80px;
            height: 80px;
        }
        .item-thumbnail {
            width: 120px;
            height: 120px;
        }
        i {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .status-badge {
            padding: 2px 8px;
            font-size: 12px;
        }
        .card-shadow {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        }
        .loading-spinner {
            width: 24px;
            height: 24px;
            border: 3px solid rgba(64, 158, 255, 0.2);
            border-radius: 50%;
            border-top-color: #409EFF;
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="bg-[#F5F7FA] min-h-[1024px]">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 顶部个人信息模块 -->
        <div class="bg-white rounded-lg card-shadow p-6 mb-8">
            <div class="flex items-center">
                <div class="relative mr-6">
                    <img src="https://ai-public.mastergo.com/ai/img_res/c00e1fd21d014283dd95098edb78678c.jpg" 
                         class="avatar rounded-full object-cover" alt="用户头像">
                    <div class="absolute bottom-0 right-0 bg-white rounded-full p-1 shadow">
                        <i class="fas fa-camera text-primary text-sm w-5 h-5"></i>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-2">
                        <h2 class="text-xl font-semibold text-gray-800">林晓雨</h2>
                        <button class="!rounded-button bg-primary text-white px-4 py-2 flex items-center">
                            <i class="fas fa-pen mr-2 text-sm w-4 h-4"></i>
                            <span>编辑资料</span>
                        </button>
                    </div>
                    <div class="flex items-center text-gray-600">
                        <i class="fas fa-phone-alt mr-2 text-sm w-4 h-4"></i>
                        <span>138 **** 5678</span>
                    </div>
                    <div class="flex items-center mt-4">
                        <div class="mr-6">
                            <div class="text-gray-500 text-sm">发布寻物</div>
                            <div class="text-primary font-semibold">12</div>
                        </div>
                        <div class="mr-6">
                            <div class="text-gray-500 text-sm">找到物品</div>
                            <div class="text-secondary font-semibold">8</div>
                        </div>
                        <div>
                            <div class="text-gray-500 text-sm">帮助他人</div>
                            <div class="text-gray-800 font-semibold">23</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中部发布的寻物模块 -->
        <div class="bg-white rounded-lg card-shadow p-6 mb-8">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-800">我发布的寻物</h3>
                <button class="text-primary hover:text-primary-dark flex items-center">
                    <span class="mr-1">查看全部</span>
                    <i class="fas fa-chevron-right text-sm w-4 h-4"></i>
                </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 寻物卡片 1 -->
                <div class="rounded-lg border border-gray-100 hover:border-primary transition-all cursor-pointer overflow-hidden">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/21afd8e409db21e1423e40b2109071ac.jpg" 
                             class="w-full h-48 object-cover" alt="钱包">
                        <div class="absolute top-2 right-2 status-badge rounded-full bg-yellow-100 text-yellow-800">寻找中</div>
                    </div>
                    <div class="p-4">
                        <h4 class="font-medium text-gray-800 mb-1">黑色皮质钱包</h4>
                        <div class="flex items-center text-gray-500 text-sm mb-2">
                            <i class="far fa-calendar-alt mr-1 w-4 h-4"></i>
                            <span>2023-11-15 丢失</span>
                        </div>
                        <div class="text-gray-600 text-sm line-clamp-2">在图书馆三楼自习区丢失，内有身份证和银行卡，如有拾到请联系，必有重谢。</div>
                    </div>
                </div>
                
                <!-- 寻物卡片 2 -->
                <div class="rounded-lg border border-gray-100 hover:border-primary transition-all cursor-pointer overflow-hidden">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/505b2df7d46b256d7071be7fd9819836.jpg" 
                             class="w-full h-48 object-cover" alt="AirPods">
                        <div class="absolute top-2 right-2 status-badge rounded-full bg-green-100 text-green-800">已找到</div>
                    </div>
                    <div class="p-4">
                        <h4 class="font-medium text-gray-800 mb-1">AirPods Pro 2代</h4>
                        <div class="flex items-center text-gray-500 text-sm mb-2">
                            <i class="far fa-calendar-alt mr-1 w-4 h-4"></i>
                            <span>2023-10-28 丢失</span>
                        </div>
                        <div class="text-gray-600 text-sm line-clamp-2">在食堂二楼丢失，白色充电盒，已通过查找功能定位在宿舍区，感谢好心人归还。</div>
                    </div>
                </div>
                
                <!-- 寻物卡片 3 -->
                <div class="rounded-lg border border-gray-100 hover:border-primary transition-all cursor-pointer overflow-hidden">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/19e98414b3fa9442a2a6590cbe72e389.jpg" 
                             class="w-full h-48 object-cover" alt="水杯">
                        <div class="absolute top-2 right-2 status-badge rounded-full bg-yellow-100 text-yellow-800">寻找中</div>
                    </div>
                    <div class="p-4">
                        <h4 class="font-medium text-gray-800 mb-1">蓝色保温水杯</h4>
                        <div class="flex items-center text-gray-500 text-sm mb-2">
                            <i class="far fa-calendar-alt mr-1 w-4 h-4"></i>
                            <span>2023-12-05 丢失</span>
                        </div>
                        <div class="text-gray-600 text-sm line-clamp-2">在操场跑步时丢失，杯身有学校logo贴纸，底部有轻微磨损痕迹。</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部找到的物品模块 -->
        <div class="bg-white rounded-lg card-shadow p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-800">已找到的物品</h3>
                <button class="text-primary hover:text-primary-dark flex items-center">
                    <span class="mr-1">查看全部</span>
                    <i class="fas fa-chevron-right text-sm w-4 h-4"></i>
                </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 找到的物品卡片 1 -->
                <div class="rounded-lg border border-gray-100 hover:border-primary transition-all cursor-pointer overflow-hidden">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/4d7ee887beee0a8e47c6fa01ec584835.jpg" 
                             class="w-full h-48 object-cover" alt="雨伞">
                        <div class="absolute top-2 right-2 status-badge rounded-full bg-blue-100 text-blue-800">待认领</div>
                    </div>
                    <div class="p-4">
                        <h4 class="font-medium text-gray-800 mb-1">黑色折叠雨伞</h4>
                        <div class="flex items-center text-gray-500 text-sm mb-2">
                            <i class="far fa-calendar-alt mr-1 w-4 h-4"></i>
                            <span>2023-12-10 找到</span>
                        </div>
                        <div class="text-gray-600 text-sm line-clamp-2">在教学楼A栋一楼大厅拾到，伞柄有"小米"标志，请失主携带购买凭证认领。</div>
                    </div>
                </div>
                
                <!-- 找到的物品卡片 2 -->
                <div class="rounded-lg border border-gray-100 hover:border-primary transition-all cursor-pointer overflow-hidden">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/1cae9a81450b54d97b9b6d3e4dcc684a.jpg" 
                             class="w-full h-48 object-cover" alt="眼镜">
                        <div class="absolute top-2 right-2 status-badge rounded-full bg-green-100 text-green-800">已认领</div>
                    </div>
                    <div class="p-4">
                        <h4 class="font-medium text-gray-800 mb-1">红色眼镜盒+黑框眼镜</h4>
                        <div class="flex items-center text-gray-500 text-sm mb-2">
                            <i class="far fa-calendar-alt mr-1 w-4 h-4"></i>
                            <span>2023-11-30 找到</span>
                        </div>
                        <div class="text-gray-600 text-sm line-clamp-2">在图书馆四楼自习区拾到，眼镜度数左眼-3.50，右眼-3.75，已由张同学认领。</div>
                    </div>
                </div>
                
                <!-- 找到的物品卡片 3 -->
                <div class="rounded-lg border border-gray-100 hover:border-primary transition-all cursor-pointer overflow-hidden">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/72860615a313478b632c76a6f236e138.jpg" 
                             class="w-full h-48 object-cover" alt="学生证">
                        <div class="absolute top-2 right-2 status-badge rounded-full bg-blue-100 text-blue-800">待认领</div>
                    </div>
                    <div class="p-4">
                        <h4 class="font-medium text-gray-800 mb-1">计算机学院学生证</h4>
                        <div class="flex items-center text-gray-500 text-sm mb-2">
                            <i class="far fa-calendar-alt mr-1 w-4 h-4"></i>
                            <span>2023-12-12 找到</span>
                        </div>
                        <div class="text-gray-600 text-sm line-clamp-2">在食堂门口拾到，姓名王伟，学号20210234，请尽快到失物招领中心认领。</div>
                    </div>
                </div>
            </div>
            
            <!-- 分页控件 -->
            <div class="flex justify-center mt-8">
                <nav class="flex items-center space-x-2">
                    <button class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50">
                        <i class="fas fa-chevron-left text-sm w-4 h-4"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-full bg-primary text-white">1</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50">2</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50">3</button>
                    <span class="px-2 text-gray-500">...</span>
                    <button class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50">8</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50">
                        <i class="fas fa-chevron-right text-sm w-4 h-4"></i>
                    </button>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>